import React, { memo } from "react"
import { addNumberAction, subNumberAction } from "./store/modules/counter"
import { connect } from "react-redux"
// import

const App = memo((props) => {
    const { count, addNumber, subNumber } = props

    function numberHandle(num, isAdd = true) {
        if (isAdd) {
            addNumber(num)
        } else {
            subNumber(num)
        }
    }

    return (
        <div>
            <h2>count计数：{count}</h2>
            <button onClick={(e) => numberHandle(1)}>+1</button>
            <button onClick={(e) => numberHandle(-1, false)}>-1</button>
        </div>
    )
})

const mapStateToProps = (state) => ({ count: state.counter.count })
const mapDispatchToProps = (dispatch) => ({
    addNumber(num) {
        dispatch(addNumberAction(num))
    },
    subNumber(num) {
        dispatch(subNumberAction(num))
    },
})

export default connect(mapStateToProps, mapDispatchToProps)(App)
